Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <svg  viewBox="0 0 1205 650">
	<path id=subject  d="M2.5,627.1c0.3-0.8,414.1,1.1,414.4,0.3c19.8-48.8,28.1-111.6,30.9-163.5c1.6-30.4-10.5-54.6-33.8-74.4
    c-37.3-31.8-81.1-59.4-125.7-79.2c-45.9-20.4-16.2-76.5-2.2-111.6c7.4-18.4,11.3-42.5,22.1-59c13.3-20.3,33-39.2,51.8-54.5
    c16.4-13.4,31.9-25.4,46.2-41c9.5-10.4,29.3-38.9,46-37.6c37.5,3-11.3,72.3-20,82.7c-8.9,10.7-41,49-60.5,85
    c0.6-40.2,31.2-55.9,58.2-95.1c74.8-108.5,95.1-71,78.1-31c-31.7,74.7-73,116.3-83.9,130.6c-8.7,11.3-15.6,30.5-28.3,37.2
    c-1.4-14.5,12.4-31.7,19.3-43.5c19.8-34.5,11.1-24.2,49.5-57c20-17.1,34.8-55,51.7-51.9c13.6,2.5,2.3,30.4-1,37.2
    c-14.2,29.5-61.7,72.3-86.8,123.4c21.3-26,54.7-97.8,71.9-102.5c29.9,0.6,9.9,45.9-8.8,58.6c-15.6,10.6-13.1,45.4-34.4,66.8
    c20.5,11.6,59.4,22,82.8,24.6c29.6,3.3,36.3,35.5,37.3,72c0.8,30.4-5.1,56,1.3,86.7c6.4,30.7,15.4,62.8,7.1,94
    c-5,18.8-19.7,47.7-43.6,37.6c-19.8-8.4-26.7-38.5-29.7-57.2c-3.7-23.4-3.1-47.2-3.2-70.8c-0.1-20.6,16.8-76.4-12.8-75.2
    c-19.6,0.8-38.6-6.6-56.9-10c-6.5-1.2-43.3-11.7-49.6-10.1c-35.1,9.1-50.7-44.1-64.2-67.3c-11.1-19-26.9-32.3-29.3-54.7
    c-1.8-16.9-1.5-30.7-5.7-47.3c-2.3-9.5-6.8-33.2-0.5-42.9c22.2-34.2,97.4,57,73.1,89.4c14.6,7.1,29.1,1.4,39.5,35.2
    c9.5,3.1,14.2,1,24.1,2c10.4,1,88.8,32.2,98.6,35.7c20.1,7.2,123.1,68.1,140,58c39.3-23.6,46.5-90,165.3-97.3
    c17.7-1.1,26-11.8,38.4-23.3c11-10.2,17.6-12.3,17.6-27.5c0-17.2-9.4-52.5-2.9-70c3.3-8.9,14.7-26.1,25.5-25.6
    c14.7,0.6,23,46,26,57.1c5.4,19.9,12.4,35.4,8.1,56.2c-4.6,22.1-16.1,45.4-23.2,67c-15.1,46-44.8,57-82.9,80.9
    c-41.6,26-41.4,61.5-38.8,106.2c0.9,14.8,3.6,45.8-18.7,41.9c-18.4-3.3-29.1-30.4-31.4-45.7c-7.2-47.7,31.5-92.3,69.8-115.1
    c18.5-11,38.9-19,59.4-25.1c17.8-5.3,42.8-8.8,54.2-25.4c18.6-27.1-4.6-90.3-11.4-119.3c-11.4-48.8-46.9-90.7-78.9-128.2
    c-7.7-9-67.1-73.4-72.7-33.7c-2.6,18.6,15,36.6,25.7,48.9c16.2,18.7,13.4,34.1,21.7,55.6c7.4,19.1,21.3,34.3,28,54.5
    c5.8,17.5,1.6,23.9,17.8,19.4c-11.1-11.5-15.8-32.2-22.2-51c-7.1-20.5-19-33.5-24.5-54.5c-7.3-27.6-37-79.5-67.5-89
    c-42.9-13.3,0.7,86,5,100c17.8,58.1,51.1,71.3,45.8,95.5c-14.5-42.6-23.1-71.5-41.3-99.6c-10.4-16.1-16.3-40.7-38.7-36.4
    c-14.4,2.8-14.2,20.6-12.5,31.9c7.2,47.5,53.2,108.5,55.3,121.5c-3.6-22.2-5.9-46.4-17.7-66.1c-3.7-6.3-11.7-17.4-20.5-15.6
    c-15.3,3.1-6.8,41.1-4,71c1.7,18.4,3.6,35.7,4.1,54.1c12.2-6.6,26.6-7.7,40-9c18.4-1.8,72.1-19.7,81-22.4
    c7.1-2.1,23.3-4.6,23.7-14.5c-1.2-10.2-57.2,10.9-113.5,40.8c-57.2,30.4-115.6,70.5-119.8,97.7c-4.7,31,19.8,63.7,22.5,94.7
    c1.9,21.2-0.8,173.5,26.2,181.8c1.4,0.4,517.2,0.5,518.8,0" fill=none stroke-width=2 stroke=#000></path>
	<path id=normals d="M0 0" fill=none stroke-width=2 stroke=#c0e></path>
	<circle r=4 cx=0 cy=x  fill=none stroke-width=1 stroke=#000></circle>
</svg>
</body>
</html>

console.log("Event Fired")

var path = document.getElementById("subject");

function getNormal(p,normalCalcDist){
	var DPath="";
	var toCheckAt = path.getTotalLength()*p;
	var midpoint = path.getPointAtLength(toCheckAt);
	var pVec = new Vec2(midpoint.x,midpoint.y);
	var circle = document.querySelector("circle");
	DPath+="M"+midpoint.x+" "+midpoint.y;
	var sigmaL = path.getPointAtLength(normalCalcDist+toCheckAt)
	sigmaL = new Vec2(sigmaL.x,sigmaL.y);
	var normal = sigmaL.sub(pVec).rotate(Math.PI/2).normalised(20);
	
	DPath+="l"+normal.x+" "+normal.y;
	
	circle.setAttribute("cx",pVec.x);
	circle.setAttribute("cy",pVec.y);
	return DPath;
}

loop(0,
	i=>i>1
	,i=>{
	
	var DPath ="";
	for(var k=0;k<20;k++){
		if(i>=1){break;}
		DPath+=" "+getNormal(i,1);
		i+=1/1000;
	}
	document.getElementById("normals").setAttribute("d",document.getElementById("normals").getAttribute("d")+DPath);
	return i;
})

Frontend Forever App